<template>
  <div class="main">
    <scrollerEdit lock-x>
      <div class="userCenterWrap" v-show="!sxmall_return_url">
        <div :class="['headTop', isVip ? 'vipHeadTop' : '']">
          <div class="heads flex-h">
            <div class="sp1">
              <img class="avatar" :src="usersData.avatar ? usersData.avatar : morenImg" alt />
            </div>
            <div class="flex1 sp2">
              <span v-if="isLogin">{{ userType != 3 ? usersData.nickName : teaName }}</span>
              <span class="notLogin" v-else @click="gourlLogin">
                <i>请注册/登录</i>
                <b>体验升学在线服务</b>
              </span>
            </div>
            <div v-if="!isVip && isLogin" @click="goPage('setting/setInfo')" class="sp3">
              <i class="bg-com_icon_change_gray_40"></i>
            </div>
            <div v-else @click="goPage('setting/setInfo')" class="sp3">
              <i class="bg-com_icon_change_white_40"></i>
            </div>
          </div>
          <!-- <div v-show="!isVip" class="headVipImage" @click="gourl('/profile/vip')"> -->
          <div v-show="false">
            <!-- <img src="https://static.shengxue985.com/sxzx_wechat/images/me_pic_vip.png" alt /> -->
          </div>
        </div>
        <div class="singleModel">
          <div class="modelTitle">我的服务</div>
          <ul class="modelList">
            <!-- <li class="singleItem" @click="gourl('/profile/vip')">
              <div class="itemImage">
                <span class="bg-me_icon_vip"></span>
              </div>
              <div class="itemName">智能服务</div>
            </li> -->
            <!-- <li class="singleItem">
							<div class="itemImage"><img src="~/static/users/me_icon_resume.png" alt=""></div>
							<div class="itemName">我的简历</div>
            </li>-->
            <!-- <li class="singleItem" @click="jumpIntoMyQuestion">
              <div class="itemImage hasbadge">
                <span class="bg-me_icon_ask"></span>
                <span
                  class="redPoint"
                  v-show="unReadQuestionNum > 0"
                >{{ unReadQuestionNum > 99 ? '99+' : unReadQuestionNum }}</span>
              </div>
              <div class="itemName">我的提问</div>
            </li> -->
            <li class="singleItem" @click="jumpIntoMyMessage">
              <div class="itemImage hasbadge">
                <!-- <img src="~/static/users/me_icon_mymessage.png" alt /> -->
                <span class="bg-me_icon_mymessage"></span>
                <span class="redPoint" v-show="unReadMessageNum > 0">{{ unReadMessageNum > 99 ? '99+' : unReadMessageNum }}</span>
              </div>
              <div class="itemName">我的消息</div>
            </li>
            <!-- <li class="singleItem" @click="goPage('messages/attentionSpecialist')">
              <div class="itemImage">
                <span class="bg-me_icon_likeexperts"></span>
              </div>
              <div class="itemName">关注专家</div>
            </li> -->
            <li class="singleItem" @click="goPage('messages/attentionSchools')">
              <div class="itemImage">
                <span class="bg-me_icon_likeschool"></span>
              </div>
              <div class="itemName">关注院校</div>
            </li>
            <li class="singleItem" @click="handleActiveVip">
              <div class="itemImage">
                <span class="me_icon_jihuo"></span>
              </div>
              <div class="itemName">激活升学卡</div>
            </li>
            <li class="singleItem" @click="handleActiveVip">
              <div class="itemImage">
                <!-- <span class="me_icon_luqu"></span> -->
                <img class="me_icon_luqu" src="~@/static/images/me_icon_luquka.png" alt="" />
              </div>
              <div class="itemName">激活录取卡</div>
            </li>
          </ul>
        </div>

        <div class="singleModel">
          <div class="modelTitle">升学服务</div>
          <ul class="modelList">
            <li class="singleItem" @click="gourl('/orders')">
              <div class="itemImage">
                <!-- <img src="~/static/users/me_icon_order_new.png" alt /> -->
                <span class="bg-me_icon_order"></span>
              </div>
              <div class="itemName">我的订单</div>
            </li>
            <li class="singleItem" @click="gourl('/collections')">
              <div class="itemImage">
                <!-- <img src="~/static/users/me_icon_collection_new.png" alt /> -->
                <span class="bg-me_icon_collection"></span>
              </div>
              <div class="itemName">我的收藏</div>
            </li>
            <li class="singleItem" @click="gourl('/share_activity/list')">
              <div class="itemImage">
                <!-- <img src="~/static/users/me_icon_invitation_new.png" alt /> -->
                <span class="bg-me_icon_invitation"></span>
              </div>
              <div class="itemName">邀请活动</div>
            </li>
            <li class="singleItem" @click="gourl('/vouchers')">
              <div class="itemImage">
                <!-- <img src="~/static/users/me_icon_coupons_new.png" alt /> -->
                <span class="bg-me_icon_coupons"></span>
              </div>
              <div class="itemName">优惠券</div>
            </li>
            <li class="singleItem" @click="gourl('/my/address')">
              <div class="itemImage">
                <!-- <img src="~/static/users/me_icon_add.png" alt /> -->
                <span class="bg-me_icon_add"></span>
              </div>
              <div class="itemName">地址管理</div>
            </li>
            <li class="singleItem" @click="gourl('/after_sale/list')">
              <div class="itemImage">
                <span class="bg-me_icon_sales"></span>
              </div>
              <div class="itemName">售后服务</div>
            </li>
            <li class="singleItem" @click="goPageUserManual">
              <div class="itemImage">
                <span class="me_icon_shouce"></span>
              </div>
              <div class="itemName">我的手册</div>
            </li>
          </ul>
        </div>

        <div class="recommendImage" @click="menuJump(actionBannerObj.url, actionBannerObj.module_type)">
          <img :src="actionBannerObj.icon_url" :alt="actionBannerObj.name" :title="actionBannerObj.name" />
        </div>

        <ul class="baseOperation">
          <li class="baseItem" @click="handleCallPhone">
            <div class="leftIntro" style="position: relative;">
              <!-- <a
                style="position: absolute;width: 100%;height: 100%;opacity: 0;"
                href="tel://(027)88161985"
              >拨打电话</a> -->
              <i class="bg-me_icon_service"></i>
              <span>联系客服</span>
            </div>
            <div class="rightClickBtn">
              <i></i>
            </div>
          </li>
          <li class="baseItem" @click="commonJs.gopush('setting/about')">
            <div class="leftIntro">
              <i class="bg-me_icon_aboutme"></i>
              <span>关于我们</span>
            </div>
            <div class="rightClickBtn">
              <i></i>
            </div>
          </li>
          <li class="baseItem" @click="goPage('setting/logout')">
            <div class="leftIntro">
              <i class="bg-me_icon_set"></i>
              <span>设置</span>
            </div>
            <div class="rightClickBtn">
              <i></i>
            </div>
          </li>
        </ul>
        <div style="width: 0.3rem;height: 1rem;background: #fff;"></div>
      </div>
    </scrollerEdit>
    <supplementInfo ref="editInfo" :showArea="showArea" @closed="showArea = 'down'" @completes="showArea = 'down'"></supplementInfo>
    <comfirBox :showComfirm="showConfirm" confirBtnTxt="去填写" @onCancel="showConfirm = false" @onConfirm="confirm">
      <div class="confirm">
        <img src="~@/static/images/tubiao_shouquanguanli_active.png" alt />
        <h2>请完善您的个人资料</h2>
        <span>该功能需要您补充完整的个人资料</span>
        <span>请您补充资料后再次进入。</span>
      </div>
    </comfirBox>
  </div>
</template>
<script>
import { getUserInfoById, getTeacherUserInfoById, getMyVip, unReadAnswerNum, reduceUnReadAnswerNum, getUnReadNum, reduceUnReadNum, myPersonalInfo } from '~/api/identity'
import { getmobilemenu } from '~/api/mobile'
import ls from 'store2'
import supplementInfo from './login/components/supplementInfo'
import comfirBox from '~/components/comfirBox'
import { Badge } from 'vux'
import scrollerEdit from '~/components/scrollerEdit'
export default {
  components: {
    scrollerEdit,
    Badge,
    supplementInfo,
    comfirBox,
  },
  data() {
    return {
      showConfirm: false,
      isLogin: false,
      showArea: '',
      tokn: null,
      usersData: [],
      teaData: [],
      morenImg: require('~/static/images/default_avatar.png'),
      userType: null,
      teaName: '',
      codes: null,
      bind: false,
      bindTea: true,
      wxunionId: null,
      actionBannerObj: {}, // 推荐banner
      unReadQuestionNum: 0, // '我的提问'未读消息数量
      unReadMessageNum: 0, // '我的消息'未读消息数量
      isVip: false, // 是否为VIP用户
      sxmall_return_url: '',
      isPageHide: false,
    }
  },
  watch: {},
  created() {},
  mounted: function() {
    if (ls.get('userType') * 1 > 2) {
      let keysPath = {
        category: 'user',
        paths: process.env.mallurl + '?from=wechat',
      }
      sessionStorage.setItem('goesRouter', JSON.stringify(keysPath))
      ls.remove('tokensyxk')
      this.commonJs.gopush('../login/msgLogin')
    }
    window.addEventListener('pageshow', function() {
      if (this.isPageHide) {
        window.location.reload()
      }
    })
    window.addEventListener('pagehide', function() {
      this.isPageHide = true
    })
    this.$visit('My')
    this.$getVip()
    this.getMyVip()
    this.sxmall_return_url = this.commonJs.GetMallParam('sxmall_return_url')
    if (this.sxmall_return_url) {
      this.getMallUrl()
      return false
    }
    if (ls.get('tokensyxk') && ls.get('userVoId') && ls.get('userType') != 3) {
      this.isLogin = true
      this.userType = ls.get('yxkData').userType
      this.getArea()
      this.getInfo()
      this.getMyMessageAmount()
      this.getMyQuestionAmount()
    } else {
      this.isLogin = false
    }
    this.getActionBanner()
    ls.remove('myQuesChoItem')
  },
  methods: {
    goPageUserManual(){
        //   ('setting/userManual')
        this.$vux.toast.text('同学你好 手册已预约成功 请在5.1服务节当天查看哦！')
    },
    confirm() {
      this.showConfirm = false
      this.$refs.editInfo.getCascadeArea()
      setTimeout(() => {
        this.showArea = 'up'
      }, 50)
    },
    getMallUrl() {
      let sxmall_return_url = this.commonJs.getMallurlParam('sxmall_return_url')
      if (sxmall_return_url) {
        let sxuri = decodeURIComponent(sxmall_return_url)
        if (/\?/.test(sxuri)) {
          this.gourl = sxuri + '&'
        } else {
          this.gourl = sxuri + '?'
        }
        this.$store.commit('changeParam', this.gourl)
        if (ls.get('tokensyxk') && ls.get('wxopen_id') && ls.get('userVoId')) {
          let urls = this.gourl + 'sx_uid=' + ls.get('userVoId') + '&sx_token=' + ls.get('tokensyxk') + '&trace_id=' + sessionStorage.getItem('trace_id') + '&open_id=' + ls.get('wxopen_id')
          window.location.replace(urls)
        } else {
          this.mallGoLogin('login/msgLogin', this.gourl)
        }
      }
    },
    mallGoLogin(routerName, queryData) {
      this.$router.replace({
        path: routerName,
        query: {
          returnMall: queryData,
        },
      })
    },
    getArea() {
      // this.$loading('open');
      getUserInfoById({ uid: ls.get('yxkData').userVoId })
        .then((res) => {
          let areas = res.data.area
          this.userGrade = res.data.grade
          this.userClassName = res.data.className
          this.userSchool = res.data.school
          if (areas) {
            let areaArr = areas.split(',')
            this.userArea = areaArr[0]
            ls.set('userArea', this.userArea)
          } else {
            ls.set('userArea', null)
          }
          this.$hideLoading()
        })
        .catch((error) => {
          this.$vux.toast.text(error)
          this.$hideLoading()
        })
    },
    gourlLogin() {
      // let url = process.env.workUrl + '/wx-yxk/#/login/msgLogin'
      // window.location.href = url
      this.commonJs.gopush('/login/msgLogin')
    },
    goPage(routerName, queryData) {
      if (ls.get('tokensyxk') && ls.get('userVoId') && ls.get('userType') != 3) {
        routerName = routerName
      } else {
        let keysPath = {
          category: 'user',
          paths: routerName,
        }
        sessionStorage.setItem('goesRouter', JSON.stringify(keysPath))
        routerName = './login/msgLogin'
      }
      this.$router.push({
        path: routerName,
        query: {
          type: queryData,
        },
      })
    },

    getMyVip() {
      if (!ls.get('tokensyxk') || ls.get('userType') == 3) return
      getMyVip({ userType: ls.get('userType') }).then((res) => {
        if (res.code == 0) {
          this.isVip = res.data.isVIP
        }
      })
    },
    handleCallPhone() {
      window.location.href = 'tel://(027)88161985'
    },
    // 激活升学卡
    handleActiveVip() {
      if (!ls.get('tokensyxk') || !ls.get('userVoId') || ls.get('userType') == 3) {
        this.$router.push({
          path: 'login/msgLogin',
        })
        return false
      }
      const isVipStr = sessionStorage.getItem('isVipStr')
      if (!isVipStr || isVipStr == '') {
        this.commonJs.gopush('vipUserRoute/openVip')
      } else {
        // 已经开通了vip
        this.commonJs.gopush('vipUserRoute/isVip')
      }
    },

    // 获取'我的提问'未读消息数量
    getMyQuestionAmount() {
      unReadAnswerNum()
        .then((res) => {
          this.unReadQuestionNum = res.data.unReadNum
        })
        .catch((err) => {
          this.$vux.toast.text(error)
        })
    },
    // 修改'我的提问'未读消息阅读状态
    jumpIntoMyQuestion() {
      if (!ls.get('tokensyxk') || !ls.get('userVoId') || ls.get('userType') == 3) {
        this.$router.push({
          path: 'login/msgLogin',
        })
        return false
      }
      if (this.unReadQuestionNum > 0) {
        reduceUnReadAnswerNum().then((res) => {})
      }
      this.commonJs.gopush('messages/myQuestion')
    },
    // 获取'我的消息'未读消息数量
    getMyMessageAmount() {
      getUnReadNum()
        .then((res) => {
          this.unReadMessageNum = res.data.unReadNum
        })
        .catch((err) => {
          this.$vux.toast.text(error)
        })
    },
    // 修改'我的消息'未读消息阅读状态
    jumpIntoMyMessage() {
      if (!ls.get('tokensyxk') || !ls.get('userVoId') || ls.get('userType') == 3) {
        this.$router.push({
          path: 'login/msgLogin',
        })
        return false
      }

      if (this.unReadMessageNum > 0) {
        reduceUnReadNum().then((res) => {})
      }
      this.commonJs.gopush('messages/myMessage')
    },

    // app动态获取banner
    getActionBanner() {
      // this.$loading('open');
      getmobilemenu()
        .then((res) => {
          this.actionBannerObj = res[0]
          // this.$hideLoading();
        })
        .catch((error) => {
          this.$vux.toast.text(error)
        })
        .finally(() => {
          this.$hideLoading()
        })
    },

    gourl(url) {
      if (!ls.get('tokensyxk') || !ls.get('userVoId') || ls.get('userType') == 3) {
        let keysPath = {
          category: 'user',
          paths: process.env.mallurl + url + '?from=wechat',
        }
        sessionStorage.setItem('goesRouter', JSON.stringify(keysPath))
        this.$router.push({
          path: 'login/msgLogin',
        })
        return false
      }
      window.location.href = process.env.mallurl + url + '?from=wechat&sx_uid=' + ls.get('userVoId') + '&sx_token=' + ls.get('tokensyxk') + '&open_id=' + ls.get('wxopen_id') + '&trace_id=' + sessionStorage.getItem('trace_id')
    },
    menuJump(url, type) {
      if (!ls.get('tokensyxk') || !ls.get('userVoId') || ls.get('userType') == 3) {
        //没有token或者没有uesrvoid
        this.$router.push({
          path: 'login/msgLogin',
        })
        return false
      }
      if (!ls.get('userArea') || !this.userGrade || !this.userClassName || !this.userSchool) {
        this.showConfirm = true
        return false
      }
      if (type == 'route') {
        this.commonJs.gopush(url)
      } else {
        window.location.href = url
      }
    },
    getInfo() {
      myPersonalInfo()
        .then((res) => {
          if (res.code == 0) {
            this.usersData = res.data
          }
        })
        .catch(() => {
          // this.$vux.toast.text('登录失败，请重新登录');
        })
    },
    // getTeaInfo() {
    //   this.teaName = ls.get("yxkData").name;
    //   getTeacherUserInfoById({ uid: ls.get("yxkData").userVoId })
    //     .then(res => {
    //       if (res.code == 0) {
    //         this.teaData = res.data;
    //         ls.set("teaData", res.data);
    //       }
    //     })
    //     .catch(error => {
    //       this.$vux.toast.text(error);
    //     });
    // }
  },
  beforeDestroy() {},
}
</script>

<style scoped lang="less">
.userCenterWrap {
  width: 7.5rem;
  min-height: 100vh;
  height: auto;
  background: #fff;

  .headTop {
    width: 100%;
    height: 4.2rem;
    background: url('~/static/me_bg_pic.png') no-repeat;
    background-size: 100% 100%;
    padding: 0 0.5rem 0 0.6rem;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    margin-bottom: 0.38rem;

    .heads {
      width: 100%;
      height: 2rem;
      margin-top: 0.5rem;

      .sp1 {
        width: 1.2rem;
        height: auto;

        img {
          display: block;
          width: 1.2rem;
          height: 1.2rem;
          border: 0.1rem solid #fff;
          border-radius: 50%;
          z-index: 1;
          margin: 0 auto;
        }
        .avatar {
          margin-top: -0.3rem;
        }
        b {
          position: relative;
          display: block;
          height: 0.4rem;
          width: 1rem;
          border-radius: 0.2rem;
          font-size: 0.24rem;
          color: #fff;
          // background: #4048EF;
          text-align: center;
          line-height: 0.4rem;
          margin: -0.2rem auto 0;
          z-index: 2;
        }
      }

      .sp2 {
        display: flex;
        flex-direction: column;
        padding-left: 0.2rem;
        margin-top: -0.1rem;
        span {
          box-sizing: border-box;
          font-size: 0.44rem;
          font-family: 'PingFangSC-Semibold';
          font-weight: 600;
          color: #222222;
        }

        img {
          width: 1.23rem;
          height: 0.37rem;
        }
        .notLogin {
          i,
          b {
            display: block;
          }
          i {
            font-size: 0.4rem;
            font-family: 'PingFangSC-Semibold';
            font-weight: 600;
            color: #222222;
          }
          b {
            font-size: 0.24rem;
          }
        }
      }
    }

    .headVipImage {
      padding: 0 0.32rem;
      width: 100%;
      height: 0.72rem;
      position: absolute;
      bottom: 0;
      left: 0;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .vipHeadTop {
    background: url('https://static.shengxue985.com/sxzx_wechat/images/background_vip.png') no-repeat;
    background-size: 100% 100%;
    .heads {
      margin-top: 1.1rem;
    }
  }

  .singleModel {
    padding: 0 0.32rem;
    margin-bottom: 0.32rem;
    .modelTitle {
      font-size: 0.36rem;
      color: #222;
      font-weight: bold;
      margin-bottom: 0.17rem;
    }
    .modelList {
      list-style: none;
      padding-left: 0;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      align-items: center;
      .singleItem {
        width: 1.71rem;
        height: 1.69rem;
        text-align: center;
        .itemImage {
          width: 0.64rem;
          height: 0.64rem;
          margin: 0 auto 0.24rem;
          span {
            display: block;
            width: 100%;
            height: 100%;
          }
          .me_icon_luqu {
            display: block;
            width: 100%;
            height: 100%;
          }
          .bg-me_icon_vip {
            background: url('~@/static/sprite/css_sprites.png') -0.1rem -0.1rem;
            background-size: 3.36rem 2.52rem;
          }

          .bg-me_icon_resume {
            background: url('~@/static/sprite/css_sprites.png') -0.94rem -0.1rem;
            background-size: 3.36rem 2.52rem;
          }

          .bg-me_icon_ask {
            background: url('~@/static/sprite/css_sprites.png') -0.1rem -0.94rem;
            background-size: 3.36rem 2.52rem;
          }

          .bg-me_icon_mymessage {
            background: url('~@/static/sprite/css_sprites.png') -0.94rem -0.94rem;
            background-size: 3.36rem 2.52rem;
          }

          .bg-me_icon_likeexperts {
            background: url('~@/static/sprite/css_sprites.png') -1.78rem -0.1rem;
            background-size: 3.36rem 2.52rem;
          }

          .bg-me_icon_likeschool {
            background: url('~@/static/sprite/css_sprites.png') -1.78rem -0.94rem;
            background-size: 3.36rem 2.52rem;
          }

          .me_icon_jihuo {
            background: url('~@/static/sprite/other_sprites.png') 3.6rem -2.18rem;
            background-size: 4.68rem 4.08rem;
          }

          .bg-me_icon_order {
            background: url('~@/static/sprite/css_sprites.png') -0.1rem -1.78rem;
            background-size: 3.36rem 2.52rem;
          }

          .bg-me_icon_collection {
            background: url('~@/static/sprite/css_sprites.png') -0.94rem -1.78rem;
            background-size: 3.36rem 2.52rem;
          }

          .bg-me_icon_invitation {
            background: url('~@/static/sprite/css_sprites.png') -1.78rem -1.78rem;
            background-size: 3.36rem 2.52rem;
          }

          .bg-me_icon_coupons {
            background: url('~@/static/sprite/css_sprites.png') -2.62rem -0.1rem;
            background-size: 3.36rem 2.52rem;
          }

          .bg-me_icon_add {
            background: url('~@/static/sprite/css_sprites.png') -2.62rem -0.94rem;
            background-size: 3.36rem 2.52rem;
          }

          .bg-me_icon_sales {
            background: url('~@/static/sprite/css_sprites.png') -2.62rem -1.78rem;
            background-size: 3.36rem 2.52rem;
          }
          .me_icon_shouce {
            background: url('~@/static/images/me_icon_shouce.png') no-repeat;
            background-size: 100% 100%;
          }

          .imgs1 {
            display: block;

            background: url('~@/static/sprite/css_sprites.png') -0.1rem -0.1rem;

            background-size: 3.36rem 2.52rem;
          }
        }
        .itemName {
          color: #222;
          font-size: 0.24rem;
        }
      }
    }
  }

  .recommendImage {
    padding: 0 0.31rem 0 0.32rem;
    margin-bottom: 0.32rem;
    width: 100%;
    height: 1.38rem;
    img {
      width: 100%;
      height: 100%;
    }
  }

  .hasbadge {
    position: relative;

    .redPoint {
      position: absolute;
      left: 0.4rem;
      top: -0.1rem;
      min-width: 0.32rem;
      max-width: 0.5rem;
      max-height: 0.32rem;
      text-align: center;
      height: 0.32rem;
      line-height: 0.24rem;
      padding: 0.04rem 0.08rem;
      box-sizing: border-box;
      background: #eb4e3f;
      color: #fff;
      font-size: 0.24rem;
      border-radius: 0.16rem;
    }
  }

  .baseOperation {
    list-style: none;
    padding: 0 0.32rem;
    .baseItem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 1.12rem;
      border-bottom: 1px solid #e5e8ed;
      .leftIntro {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        img {
          width: 0.4rem;
          height: 0.4rem;
          margin-right: 0.24rem;
        }
        span {
          color: #222;
          font-size: 0.28rem;
        }
      }
      .rightClickBtn {
        width: 0.4rem;
        height: 0.4rem;
        i {
          display: inline-block;
          width: 0.4rem;
          height: 0.4rem;
          background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -1.3rem;
          background-size: 3rem 2.4rem;
        }
      }
    }
  }
}
.confirm {
  width: 100%;
  height: auto;
  overflow: hidden;
  background: #fff;
  border-radius: 0.2rem;
  img,
  h2,
  span,
  b {
    display: block;
  }
  img {
    display: block;
    width: 1.4rem;
    height: 1.4rem;
    margin: 0.2rem auto 0;
  }
  h2 {
    font-size: 0.4rem;
    font-family: PingFangSC-Semibold, PingFangSC;
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
    margin: 0.1rem auto 0.2rem;
    text-align: center;
  }
  span {
    font-size: 0.3rem;
    font-family: PingFangSC-Regular, PingFangSC;
    font-weight: 400;
    color: rgba(34, 34, 34, 1);
    line-height: 0.5rem;
    text-align: center;
  }
  .botter-btn {
    margin-top: 0.5rem;
    border-top: 0.01rem solid rgba(229, 232, 237, 1);
  }
  b {
    height: 0.9rem;
    text-align: center;
    line-height: 0.9rem;
    font-size: 0.3rem;
    font-family: 'PingFangSC-Semibold', PingFangSC;
    font-weight: 600;
    color: rgba(34, 34, 34, 1);
  }
  b:nth-of-type(2) {
    color: @assistColor;
    border-left: 0.01rem solid rgba(229, 232, 237, 1);
  }
}
// .fadein{
//         opacity:100;
//         filter:alpha(opacity=100);
//     }
</style>
